<template>
  <view>
    <AtMessage />
    <view class="login_box"></view>
    <view class="form_box">
      <view class="tabs_box">
        <view class="tabs_item" :class="{select_item: activeTab == 1}" @tap="changeTab(1)">登陆</view>
        <view class="tabs_item" :class="{select_item: activeTab == 2}" @tap="changeTab(2)">注册</view>
      </view>
      <view class="input_line">
        <view class="input_icon">
          <AtIcon value='user' size='24' color="#5064EB"></AtIcon>
        </view>
        <AtInput
          name='value1'
          :border="false"
          type='phone'
          size="small"
          placeholder='请输入手机号码'
          class="input_box"
          :value="account"
          @change="inputAccount"
        >
          <AtButton size='small' v-if="activeTab == 2" @click="getVerifyMsg()" :disabled="msgDisabled">获取验证码<text style="padding:0;margin:0;" v-if="msgDisabled">({{msgSecond}})</text></AtButton>
        </AtInput>
      </view>
      <view class="input_line" style="margin-top:30px" v-if="activeTab == 1">
        <view class="input_icon">
          <AtIcon value='lock' size='24' color="#5064EB"></AtIcon>
        </view>
        <AtInput
          name='value2'
          :border="false"
          type='password'
          placeholder='请输入密码'
          size="small"
          class="input_box"
          :value="password"
          @change="inputPassword"
        />
      </view>
      <view class="input_line" style="margin-top:20px" v-if="activeTab == 2">
        <view class="input_icon">
          <AtIcon value='mail' size='24' color="#5064EB"></AtIcon>
        </view>
        <AtInput
          name='value3'
          :border="false"
          type='verify'
          placeholder='请输入验证码'
          size="small"
          class="input_box"
          :value="verify"
          @change="inputVerify"
        />
      </view>
      <view class="input_line" style="margin-top:20px" v-if="activeTab == 2">
        <view class="input_icon">
          <AtIcon value='lock' size='24' color="#5064EB"></AtIcon>
        </view>
        <AtInput
          name='value4'
          :border="false"
          type='password'
          placeholder='请设置密码'
          size="small"
          class="input_box"
          :value="newPassword"
          @change="inputPassword2"
        />
      </view>
      <view class="input_line" style="margin-top:20px" v-if="activeTab == 2">
        <view class="input_icon">
          <AtIcon value='share' size='24' color="#5064EB"></AtIcon>
        </view>
        <AtInput
          name='value5'
          :border="false"
          type='verify'
          placeholder='请输入邀请码'
          size="small"
          class="input_box"
          :value="invite_code"
          @change="inputInvite"
        />
      </view>
      <view>
        <AtButton type='primary' v-if="activeTab == 1" circle class="login_button" @click="login()">立即登陆</AtButton>
        <AtButton type='primary' v-if="activeTab == 2" circle class="login_button" @click="regist()">立即注册</AtButton>
      </view>
    </view>
    <AtToast :isOpened="showLoading" :text="loadingText" :duration="0" status="loading"></AtToast>
    <AtToast :isOpened="showError" :text="errorText" status="error"></AtToast>
  </view>
</template>

<script>
import './login.module.scss'
import accountImg from '../../assets/images/account.png'
import Taro from '@tarojs/taro'
import { ref } from 'vue'
import LoginAPI from '../../api/login.js'
export default {
  name: 'login',
  components:{
  },
  data(){
    return{
      account: "", // 账号
      password: "", //密码
      verify: "", // 验证码
      showLoading: false, // 正在登陆loading
      activeTab: 1, // 1.登陆 2.注册
      msgDisabled: false,
      msgSecond: 60,
      loadingText: "正在登陆", // loading文字
      errorText: "",
      showError: false, 
      newPassword: "", // 注册设置密码
      invite_code: "", // 邀请码
    }  
  },
  methods: {
    async login(){
      console.log('登陆',this.account,this.password)
      this.showLoading = true
      var data = {
        mobile: this.account,
        password: this.password
      }
      const res = await LoginAPI.login(data);
      console.log(res)
      this.showLoading = false;
      if(res.code == 200){
        Taro.setStorageSync('token',res.data.app_token);
        // this.selectAppId()
        this.selectApp();
      }else{
        this.errorText = res.msg;
        this.showError = true;
        setTimeout(() => {
          this.showError = false;
        }, 2000);
      }
    },
    async regist(){
      console.log('注册',this.account,this.password);
      this.loadingText = "正在注册";
      this.showLoading = true;
      var data = {
        mobile: this.account,
        password: this.newPassword,
        invite_code: this.invite_code,
        verification_code: this.verify
      }
      const res = await LoginAPI.UserRegister(data);
      console.log(res);
      if(res.code == 200){
        this.showLoading = false;
        this.registSuccess();
      }else{
        this.showLoading = false;
        this.errorText = res.msg;
        this.showError = true;
        setTimeout(() => {
          this.showError = false;
        }, 2000);
      }
    },
    async registSuccess(){
      this.showLoading = true
      var data = {
        mobile: this.account,
        password: this.newPassword
      }
      const res = await LoginAPI.registerLogin(data);
      console.log(res)
      if(res.code == 1){
        Taro.setStorageSync('token',res.data.app_token);
        this.initApp(res.data.app_token);
      }else{
        this.showLoading = false;
        this.errorText = res.msg;
        this.showError = true;
        setTimeout(() => {
          this.showError = false;
        }, 2000);
      }
    },
    async initApp(data){
      const res = await LoginAPI.initAppId(data);
      console.log(res);
      if(res.code == 200){
        this.showLoading = false;
        Taro.setStorageSync('app_id',res.data.app_id);
        Taro.navigateTo({
          url: '/pages/regist/regist'
        })
      }
    },
    async selectAppId(){
      const res = await LoginAPI.selectApp();
      console.log(res)
      Taro.setStorageSync('app_id',res.data[0].app_id);
      Taro.setStorageSync('emp_id',res.data[0].id);
      Taro.setStorageSync('role_id',res.data[0].role_id);
      Taro.navigateTo({
        url: '/pages/selectStore/selectStore'
      })
    },
    selectApp(){
      Taro.navigateTo({
        url: '/pages/selectApp/selectApp'
      })
    },
    inputAccount(val){ // 输入手机号
      this.account = val;
    },
    inputPassword(val){ // 输入登陆密码
      this.password = val;
    },
    inputVerify(val){ // 输入验证码
      this.verify = val;
    },
    inputPassword2(val){ // 输入新密码
      this.newPassword = val;
    },
    inputInvite(val){ // 输入邀请码
      this.invite_code = val;
    },
    changeTab(i){ // 切换登陆/注册
      this.activeTab = i;
      // if(i == 2){
      //   Taro.navigateTo({url: "/pages/flow/user"})
      // }
    },
    async getVerifyMsg(){ // 获取验证码
      const res = await LoginAPI.sendRegisterCode({mobile:this.account});
      if(res.code == 200){
        Taro.atMessage({
          message: '发送成功',
          type: 'success',
          duration: 2000
        })
      }
      this.msgDisabled = true;
      this.changeSecond();
    },
    changeSecond(){ // 验证码秒数
      if(this.msgSecond == 0){
        this.msgDisabled = false;
        this.msgSecond = 60;
      }else{
        setTimeout(() => {
          this.msgSecond -= 1;
          this.changeSecond();
        }, 1000);
      }
    }
  }
  // setup(){
  //   const account = ref('');
  //   const password = ref('');
  //   function login(){
  //     console.log('登陆',account.value,password.value)
  //   };
  //   function inputAccount(val){
  //     account.value = val
  //   }
  //   function inputPassword(val){
  //     password.value = val
  //   }
  //   return {
  //     account,password,login
  //   }
  // },
}
</script>
